<template>
	<view class="content">
		<!-- 活动封面 -->
		<view class="activitiesCover">
			<view>活动封面</view>
			<view class="img" @click="chooseImg">
				<image :src="src" mode="scaleToFill" />
			</view>
		</view>
		<!-- 活动名称 -->
		<view class="activitiesName">
			<view class="name">活动名称</view>
			<view class="inputName">
				<u--input placeholder="请输入活动名称" border="none" v-model="value" @change="change" showWordLimit></u--input>
			</view>
		</view>
		<!-- 活动简介 -->
		<view class="activeIntroduce">
			<view class="name">活动简介</view>
			<view class="inputName">
				<u--textarea type="textarea" border="none" v-model="value" placeholder="请输入活动简介" showWordLimit>></u--textarea>
			</view>
		</view>
		<!-- 活动时间 -->
		<view class="activityTime">
			活动时间
			<view class="time">
				<text class="startTime" @click="selectionTime(1)">{{value1}}</text>
				<text class="startTime" @click="selectionTime(2)">{{value2}}</text>
			</view>
		</view>
		<!-- 活动人数 -->
		<view class="number">
			<view class="name">活动人数</view>
			<u--input placeholder="请输入" border="none" v-model="number" @change="change" inputAlign="right" showWordLimit>></u--input>
		</view>
		<!-- 活动联系人 -->
		<view class="contact">
			<view class="name">
				活动联系人
				<u--input placeholder="请输入" border="none" v-model="value" @change="change" inputAlign="right" showWordLimit></u--input>
			</view>
			<view class="phoneNumber">
				活动人联系方式
				<u--input type="text" placeholder="请输入" border="none" v-model="value" @change="change" inputAlign="right" showWordLimit></u--input>
			</view>
		</view>
		<!-- 发布按钮 -->
		<view class="fixed">
			<u-button :color="color" :text="text" type="info" @click="SignIn" :disabled="bool"></u-button>
		</view>
		<!-- 时间选择器 -->
		<u-datetime-picker :show="show" v-model="value1s" mode="datetime" @cancel="cancel" @confirm="confirm"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: '/static/logo.png',	// 封面图片
				color: '#ff895e',   // 按钮颜色
				text: '创建',  		// 按钮文字
				bool: false,   		// 是否禁用按钮
				value: '',
				value1: '年-月-日——时-分',// 活动开始时间
				value2: '年-月-日——时-分',// 活动结束时间
				value1s: Number(new Date()),
				show: false,	// 控制时间选择器的 "显示与隐藏"
				number: '',		// 活动人数
			}
		},
		methods: {
			// 签到
			SignIn() {
				this.color = '';
				this.bool = true;
				this.text = '已签到';
			},
			// 选择封面
			chooseImg() {
				const that = this
				uni.chooseImage({
					count: 1,
					// 图片格式：
					// sizeType: ['original', 'compressed'],
					crop: {
						width: 80,
						height: 80,
						resize: false
					},
					// 图片来源：从相册中选择
					sourceType: ['album'],
					success: (res) => {
						if (res.errMsg == "chooseImage:ok" && res.tempFilePaths.length !== 0) {
							that.src = res.tempFilePaths[0]
						}
					}
				})
			},
			// 取消选择
			cancel() {
				this.show = !this.show;
			},
			// 确定选择
			confirm(e) {
				let time = uni.$u.timeFormat(e.value, 'yyyy-mm-dd——hh:MM');
				switch (this.key) {
					case 1:
						this.value1 = time;
						break;
					case 2:
						this.value2 = time;
						break;
				
					default:
						break;
				}
				this.show = !this.show;
			},
			// 选择时间
			selectionTime(key) {
				this.show = !this.show;
				this.key = key;
			}
		}
	}
</script>

<style lang="scss">
	.content {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		.activitiesCover,
		.number,
		.activityTime {
			display: flex;
			border-bottom: 1rpx solid #c3c3c3;
		}

		// 活动名称
		.activitiesName {
			padding: 30rpx;
			border-bottom: 1rpx solid #c3c3c3;
			.name {
				padding: 10rpx;
			}
			//输入框
			.inputName {
				width: 70%;
			}
		}

		// 活动介绍
		.activeIntroduce {
			width: 100%;
			padding-bottom: 10rpx;
			border-bottom: 1rpx solid #c3c3c3;
			.name {
				padding: 20rpx 0 20rpx 50rpx;
			}
			.inputName {
				width: 96%;
				margin: 0 auto;
			}
		}

		// 活动封面
		.activitiesCover {
			justify-content: space-around;
			align-items: center;
			font-size: 50rpx;
			padding-top: 20rpx;
			image {
				width: 160rpx;
				height: 160rpx;
			}
		}
		// 活动时间
		.activityTime {
			flex-direction: column;
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			color: #666;
			.time {
				display: flex;
				justify-content: space-around;
				align-items: center;
				width: 100%;
				height: 100rpx;
				.startTime {
					padding: 10rpx;
					border-radius: 20rpx;
					font-size: 30rpx;
					border: 1px dashed #666;
				}
			}
		}
		// 活动人数
		.number {
			box-sizing: border-box;
			display: flex;
			align-items: center;
			padding: 30rpx;
			width: 100%;
			font-size: 30rpx;
		}
		// 联系人及联系方式
		.contact {
			// height: 200rpx;
			box-sizing: border-box;
			// padding: 30rpx;
			width: 100%;
			font-size: 30rpx;

			.name,
			.phoneNumber {
				display: flex;
				align-items: center;
				padding: 30rpx;
				border-bottom: 1rpx solid #c3c3c3;
			}
			.name {
				padding-bottom: 15rpx;
			}
			.phoneNumber {
				padding-top: 15rpx;
			}
		}
	}

	// 签到按钮
	.fixed {
		position: fixed;
		bottom: 0;
		right: 0;
		z-index: 100;
		width: 100%;
		border-radius: 20rpx;
		box-shadow: 0px 0px 14px #8cb7ffc7;
	}
</style>
